<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;
        }

        .main {
            width: 50%;
            margin: 0 auto;
            height: auto;
        }

        .btn {
            width: 80px;
            height: 38px;
        }

        .fun {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }

        .floatRight {
            margin-left: auto;
        }

        li{
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }
        li div{
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="main">
    <h1>影史上公认最好看的五部影片</h1>
    <div class="fun">
        <span>Sort by: </span>
        <button class="btn floatLeft" id="rank">Rank</button>
        <button class="btn floatLeft" id="title">Title</button>
        <button class="btn floatLeft" id="description">Description</button>
        <button class="btn floatRight" id="add">Add</button>
    </div>
    <main>
        <div id="main"></div>
    </main>
</div>

<script type="module" src="src/index.js"></script>
</body>
</html>